<template>
    <div class="login-container">
        <div class="login-header">
            <h1>Login</h1>
        </div>
        <div class="login-form">
            <a-form :model="loginForm" ref="loginForm" size="large">
                <a-form-item field="account">
                    <a-input v-model="loginForm.account" placeholder="账号" />
                </a-form-item>
                <a-form-item field="password">
                    <a-input-password v-model="loginForm.password" placeholder="密码" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" :loading="logining" @click="handleLogin">登录</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/user';
const userStore = useUserStore()
const logining = ref(false);
const loginForm = ref({} as any);
// const rules = ref({
//     account: [
//         { required: true, message: "请输入账号" },
//     ],
//     password: [
//         { required: true, message: "请输入密码" },
//     ],
// } as any);

const handleLogin = async () => {
    logining.value = true;
    userStore.login(loginForm.value, '/console')
        .finally(() => {
            logining.value = false;
        });
};

</script>
<style scoped lang="css">
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-header {
    margin-top: 10px;
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 300px;
    margin-top: 10px;
}
</style>